<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta http-equiv="Pragma" content="no-cache">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
		<meta name="format-detection" content="telephone=no" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
		<title>创建会议</title>
		<link rel="stylesheet" type="text/css" href="css/date.css" />
		<link rel="stylesheet" type="text/css" href="css/weui.min.css" />
		<link rel="stylesheet" type="text/css" href="css/font-awesome-4.7.0/css/font-awesome.css" />
		<%
		    String appid  = (String)request.getAttribute("appId");
		    String nonceStr  = (String)request.getAttribute("nonceStr");
		    String timestamp = (String)request.getAttribute("timestamp");//10
		    String signature = (String)request.getAttribute("signature");
		    String userid=(String)request.getAttribute("loginuser");
		%>

		<script type="text/javascript">
			function stops() {
				return false;
			}
			document.oncontextmenu = stops;
		</script>
		<style type="text/css">
			.weui-panel:before,
			.weui-panel:after {
				border: 0px;
			}
			
			#details:after {
				content: "";
				clear: both;
				display: table
			}
			
			.left {
				margin-top: 1em;
			}
			
			.left>a {
				height: 2em;
				width: 100%;
				margin-bottom: 5px;
				padding: 0;
				border-radius: 3px;
			}
			
			.left>a i {
				height: 100%;
				width: 100%;
				font-size: 20px;
				line-height: 2em;
				color: #fff;
				background: #10AEFF;
			}
			
			.weui-media-box {
				padding: 3px 15px;
				position: relative;
			}
			
			.weui-tabbar__item.weui-bar__item--on .weui-tabbar__label {
				color: #04BE02;
			}
		</style>
	</head>

	<body>
		<div class="page" id="container">
			<div class="weui-tab">
				<div class="weui-tab__bd">
					<div class="wrapper02" id="demo06">
						<div class="scroller">
							<ul class="clearfix">

							</ul>
						</div>
					</div>
					<div id="details">
						<div class="left">
							<a href="javascript:;" class="weui-btn" style="font-size: 19px;" id="room_select"><i class="fa fa-plus"></i></a>
							<ul>
								<li>上午<br />(9:00~12:00)</li>
								<li>下午一<br />(14:00~18:00)</li>
							</ul>
						</div>
						<div class="right">
							<div class="room">
								<a href="room_details.html" style="color: #000;cursor: pointer;" id="room"></a>
							</div>
							<table cellspacing="" cellpadding="">
								<tr>
									<td id="morning"></td>
								</tr>
								<tr>
									<td id="afternoon"></td>
								</tr>
							</table>
						</div>
					</div>
					<div class="weui-flex" id="describe">
						<div class="weui-flex__item">
							<i></i>
							<span class="placeholder">已占有</span>
						</div>
						<div class="weui-flex__item">
							<i style="background: #EC8B89;"></i>
							<span class="placeholder">我相关的</span>
						</div>
					</div>

				</div>
				<a href="javascript:;" class="weui-btn weui-btn_primary" id="create" style="margin-bottom: 50px;">创建会议</a>
				<div class="weui-tabbar">
					<a href="meetroomnav" class="weui-tabbar__item">
						<!--<span class="weui-badge" style="position: absolute;top: -.4em;right: 1em;">8</span>-->
						<div class="weui-tabbar__icon">
							<i class="fa fa-map" style="font-size: 24px;"></i>
						</div>
						<p class="weui-tabbar__label">会议室</p>
					</a>
					<a href="rcnav" class="weui-tabbar__item">
						<div class="weui-tabbar__icon">
							<i class="fa fa-calendar" style="font-size: 24px;"></i>
						</div>
						<p class="weui-tabbar__label">日程</p>
					</a>
					<a href="ordernav" class="weui-tabbar__item  weui-bar__item--on">
						<div class="weui-tabbar__icon">
							<i class="fa fa-edit" style="font-size: 24px;"></i>
						</div>
						<p class="weui-tabbar__label">创建</p>
					</a>
					<a href="meetselfnav" class="weui-tabbar__item">
						<div class="weui-tabbar__icon">
							<i class="fa fa-user" style="font-size: 24px;"></i>
						</div>
						<p class="weui-tabbar__label">我</p>
					</a>
				</div>
			</div>
		</div>
		<div class="page" style="display: none;">
			<div id="room_details">
				<a class="weui-cell weui-cell_access">
					<div class="weui-cell__hd" style="position: relative;margin-right: 10px;">
						<i class="weui-icon-circle" style="margin: 5px 5px;"></i>
					</div>
					<div class="weui-cell__bd">
						<p data-xh="1">1309室</p>
						<p style="font-size: 13px;color: #888888;">未来24小时 空闲</p>

					</div>
				</a>
				<a class="weui-cell weui-cell_access">
					<div class="weui-cell__hd" style="position: relative;margin-right: 10px;">
						<i class="weui-icon-circle" style="margin: 5px 5px;"></i>
					</div>
					<div class="weui-cell__bd">
						<p>1309室</p>
						<p style="font-size: 13px;color: #888888;">未来24小时 空闲</p>

					</div>
				</a>
			</div>
			<div class="weui-flex">
				<div class="weui-flex__item" id="back_edit">
					<div class="placeholder">
						<a href="javascript:;" class="weui-btn weui-btn_default" style="margin:10px 20px;">返回</a>
					</div>
				</div>
				<div class="weui-flex__item" id="room_confirm">
					<div class="placeholder">
						<a href="javascript:;" class="weui-btn weui-btn_primary" style="margin:10px 20px;">确认选择</a>
					</div>
				</div>
			</div>
		</div>
		<div class="page" style="background: #EEEEEE;display: none;" id="meetting_create">
			<div class="weui-cells weui-cells_form" style="margin-top: 0;">
				<div class=weui-cell>
					<div class=weui-cell__hd><label class=weui-label>会议标题</label></div>
					<div class=weui-cell__bd> <input id="title" class=weui-input type=text required placeholder=输入会议标题 emptytips=会议标题不能为空> </div>
					<div class=weui-cell__ft> <i class=weui-icon-warn></i> </div>
				</div>
				<!--<div class="weui-cell">
					<div class="weui-cell__bd">
						<textarea class="weui-textarea" id="content" placeholder="请输入会议内容" rows="2"></textarea>
						<div class="weui-textarea-counter"><span>0</span>/200</div>
					</div>
				</div>-->
			</div>
			<div class="weui-panel weui-panel_access">
				<div class="weui-panel__bd">
					<div class="weui-media-box weui-media-box_text" id="room">
						<h6 class="weui-media-box__title" id="roomselect">1309室</h6>
						<p class="weui-media-box__desc">一共有10个座位，1台投影仪，三台电脑</p>
					</div>
					<div class="weui-cells">
						<div class="weui-cell">
							<div class="weui-cell__hd"><label for="" class="weui-label">开始时间</label></div>
							<div class="weui-cell__bd">
								<input class="weui-input" type="datetime-local" value="" placeholder="" id="begintime">
							</div>
						</div>
						<div class="weui-cell">
							<div class="weui-cell__hd"><label for="" class="weui-label">结束时间</label></div>
							<div class="weui-cell__bd">
								<input class="weui-input" type="datetime-local" value="" placeholder="" id="endtime">
							</div>
						</div>
					</div>
				</div>
				<div class="weui-panel__ft">
				</div>
			</div>

			<div class="weui-cells">
				<a class="weui-cell weui-cell_access" href="javascript:;" id="peo0">
					<div class="weui-cell__bd">
						<p>主持人</p>
					</div>
					<div class="weui-cell__ft" id="count0">请选择</div>
				</a>
				<a class="weui-cell weui-cell_access" href="javascript:;" id="peo1">
					<div class="weui-cell__bd">
						<p>发起人</p>
					</div>
					<div class="weui-cell__ft" id="count1">已选择0人</div>
				</a>
				<a class="weui-cell weui-cell_access" href="javascript:;" id="peo2">
					<div class="weui-cell__bd">
						<p>参与人</p>
					</div>
					<div class="weui-cell__ft" id="count2">已选择0人</div>
				</a>
				<div class=weui-cell>
					<div class=weui-cell__hd><label class=weui-label>参会人数</label></div>
					<div class=weui-cell__bd> <input id="total" class=weui-input type=text required emptytips=会议标题不能为空> </div>
					<div class=weui-cell__ft></div>
				</div>
				<div class="weui-cell">
					<div class="weui-cell__bd">
						<textarea class="weui-textarea" placeholder="备注信息" rows="3" id="other"></textarea>
						<div class="weui-textarea-counter"><span>0</span>/200</div>
					</div>
				</div>
			</div>

			<div class="weui-flex">
				<div class="weui-flex__item">
					<div class="placeholder">
						<a href="index.jsp" class="weui-btn weui-btn_default" style="margin:10px 20px;">返回</a>
					</div>
				</div>
				<div class="weui-flex__item" id="submit">
					<div class="placeholder">
						<a href="javascript:;" class="weui-btn weui-btn_primary" style="margin:10px 20px;">提交</a>
					</div>
				</div>
			</div>
		</div>
		<script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/flex.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/iscroll.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/navscroll.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/date.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			function parseURL(url) {
				if(url.indexOf("?") == -1) return
				var url = url.split("?")[1];
				var arr = url.split("=");
				var res = arr[1];
				return res;
			}
			var url2 = window.location.href;
			url2 = decodeURIComponent(url2)
			var res = parseURL(url2)
			if(res != "") {
				$("#room").html(res)
			}
			var mdata = [];
			$.ajaxSettings.async = false;
			$.post("meetingorder", {
				roomname: res
			}, function(data) {
				mdata = data
			})
			$.ajaxSettings.async = false;

			var myDate = new Date();
			var date = myDate.getDate();
			program(date)

			function getnum(time) {
				var a = time.split("T")[0].split("-");
				return a[2]
			}

			function gethour(time) {
				var a = time.split("T")[1].split(":");
				return a[0]
			}
			$('.clearfix').on('click', 'li', function() {
				$("#afternoon,#morning").html("")
				$("#afternoon,#morning").removeClass("otherusing")
				$("#afternoon,#morning").removeClass("select")
				var date = $(this).attr("data-day");
				program(date)
			})

			function program(date) {
				for(var i = 0; i < mdata.length; i++) {
					var num = getnum(mdata[i].starttime)
					if(num == date) {
						var html = "";
						html += '<div class="weui-panel">'
						html += '<div class="weui-panel__bd">'
						html += '<div class="weui-media-box weui-media-box_text">'
						html += '<h4 class="weui-media-box__title">' + mdata[i].name + '</h4>'
						html += '<p class="weui-media-box__desc">' + mdata[i].content + '</p>'
						html += '</div>'
						html += '</div>'
						html += '</div>'
						var hour1 = gethour(mdata[i].starttime);
						var hour2 = gethour(mdata[i].finishtime);
						if(hour1 < 12) {
							$("#morning").html(html)
							$("#morning").addClass("otherusing")

						} else {
							$("#afternoon").html(html)
							$("#afternoon").addClass("otherusing")

						}
						if(hour2 > 12) {
							$("#afternoon").html(html)
							$("#afternoon").addClass("otherusing")

						} else {
							$("#morning").html(html)
							$("#morning").addClass("otherusing")

						}
					}

				}
			}
			$(".right").on("click", "#afternoon,#morning", function() {
				if($(this).html() == "") {
					$(this).toggleClass("select")
				}
			})
			$("#create").click(function() {
				var myDate = new Date();
				var year = myDate.getFullYear()
				var month = myDate.getMonth() + 1;
				var date = $("li.cur").children().html()
				var starttime, finishtime;
				if($(".select").length > 1) {
					starttime = year + "-" + month + "-" + date + "T09:00";
					finishtime = year + "-" + month + "-" + date + "T18:00";
				} else {
					var type = $(".select").attr("id")
					if(type == "morning") {
						starttime = year + "-" + month + "-" + date + "T09:00";
						finishtime = year + "-" + month + "-" + date + "T12:00";
					} else if(type == "morning"){
						starttime = year + "-" + month + "-" + date + "T14:00";
						finishtime = year + "-" + month + "-" + date + "T18:00";
					}
				}
				var room = $("#room").html()
				$("#meetting_create").show().siblings().hide()
				$("#begintime").val(starttime)
				$("#endtime").val(finishtime)
			})
			$("#room_select").click(function() {
				$.post("order", function(data) {
					var html = "";
					for(var i = 0; i < data.length; i++) {
						html += '<a class="weui-cell weui-cell_access">'
						html += '<div class="weui-cell__hd" style="position: relative;margin-right: 10px;">'
						html += '<i class="weui-icon-circle" style="margin: 5px 5px;"></i>'
						html += '</div>'
						html += '<div class="weui-cell__bd">'
						html += '<p>' + data[i].topic + '</p>'
						html += '<p style="font-size: 13px;color: #888888;">' + data[i].bz + '</p>'
						html += '</div>'
						html += '</a>'
					}
					$("#room_details").html(html)
				})
				$("#room_details").parent().show()
				$("#room_details").parent().siblings().hide();
			})
			$("#room_details").on("click", ".weui-cell__hd i", function() {
				if($(this).hasClass("weui-icon-success")) {
					$(this).removeClass("weui-icon-success").addClass("weui-icon-circle")
				} else {
					$(".weui-cell__hd i").removeClass("weui-icon-success").addClass("weui-icon-circle")
					$(this).addClass('weui-icon-success').removeClass("weui-icon-circle")
				}
			})
			$("#room_confirm").click(function() {
				$("#container").show();
				$("#room_details").parent().hide()
				var room = $(".weui-icon-success").parent().next().children().html();
				$("#room").html(room)
				$.ajaxSettings.async = false;
				$.post("meetingorder", {
					roomname: room
				}, function(data) {
					mdata = data
				})
			})
			wx.config({
				beta: true,
				debug: false,
				appId: '<%=appid %>',
				timestamp: '<%=timestamp %>',
				nonceStr: '<%=nonceStr %>',
				signature: '<%=signature %>',
				jsApiList: [
					'checkJsApi',
					'onMenuShareAppMessage',
					'onMenuShareWechat',
					'startRecord',
					'stopRecord',
					'onVoiceRecordEnd',
					'playVoice',
					'pauseVoice',
					'stopVoice',
					'uploadVoice',
					'downloadVoice',
					'chooseImage',
					'previewImage',
					'uploadImage',
					'downloadImage',
					'getNetworkType',
					'openLocation',
					'getLocation',
					'hideOptionMenu',
					'showOptionMenu',
					'hideMenuItems',
					'showMenuItems',
					'hideAllNonBaseMenuItem',
					'showAllNonBaseMenuItem',
					'closeWindow',
					'scanQRCode',
					'previewFile',
					'openEnterpriseChat',
					'selectEnterpriseContact',
					'onHistoryBack'
				]
			});
			wx.checkJsApi({
				jsApiList: ['openEnterpriseChat'], // 需要检测的JS接口列表，所有JS接口列表见附录2,

				success: function(res) {
					console.log(res)
				}
				// 以键值对的形式返回，可用的api值true，不可用为false

			});
			var initiator = [];
			var participant = []
			var zcr;
			wx.ready(function() {
				$("#peo0").click(function() {
					wx.invoke("selectEnterpriseContact", {
						"fromDepartmentId": 0, // 必填，-1表示打开的通讯录从自己所在部门开始展示, 0表示从最上层开始

						"mode": "multi", // 必填，选择模式，single表示单选，multi表示多选

						"type": ["user"], // 必填，选择限制类型，指定department、user中的一个或者多个

						//					"selectedDepartmentIds": ["2", "3"], // 非必填，已选部门ID列表。用于多次选人时可重入

						//					"selectedUserIds": ["lisi", "lisi2"] // 非必填，已选用户ID列表。用于多次选人时可重入

					}, function(res) {
						initiator = []
						if(res.err_msg == "selectEnterpriseContact:ok") {
							if(typeof res.result == 'string') {
								res.result = JSON.parse(res.result) //由于目前各个终端尚未完全兼容，需要开发者额外判断result类型以保证在各个终端的兼容性

							}
							var selectedDepartmentList = res.result.departmentList; // 已选的部门列表

							for(var i = 0; i < selectedDepartmentList.length; i++) {
								var department = selectedDepartmentList[i];
								var departmentId = department.id; // 已选的单个部门ID

								var departemntName = department.name; // 已选的单个部门名称

							}
							var selectedUserList = res.result.userList; // 已选的成员列表

							for(var i = 0; i < selectedUserList.length; i++) {
								var user = selectedUserList[i];
								var userId = user.id; // 已选的单个成员ID

								initiator.push(userId)
								var userName = user.name; // 已选的单个成员名称
								$("#count0").html(userName);
								zcr = userName;
								var userAvatar = user.avatar; // 已选的单个成员头像

							}
							var html = "已选择" + selectedUserList.length + "人";
							$("#count1").html(html)
						}
					});
				})
				$("#peo1").click(function() {
					wx.invoke("selectEnterpriseContact", {
						"fromDepartmentId": 0, // 必填，-1表示打开的通讯录从自己所在部门开始展示, 0表示从最上层开始

						"mode": "multi", // 必填，选择模式，single表示单选，multi表示多选

						"type": ["user"], // 必填，选择限制类型，指定department、user中的一个或者多个

						//					"selectedDepartmentIds": ["2", "3"], // 非必填，已选部门ID列表。用于多次选人时可重入

						//					"selectedUserIds": ["lisi", "lisi2"] // 非必填，已选用户ID列表。用于多次选人时可重入

					}, function(res) {
						initiator = []
						if(res.err_msg == "selectEnterpriseContact:ok") {
							if(typeof res.result == 'string') {
								res.result = JSON.parse(res.result) //由于目前各个终端尚未完全兼容，需要开发者额外判断result类型以保证在各个终端的兼容性

							}
							var selectedDepartmentList = res.result.departmentList; // 已选的部门列表

							for(var i = 0; i < selectedDepartmentList.length; i++) {
								var department = selectedDepartmentList[i];
								var departmentId = department.id; // 已选的单个部门ID

								var departemntName = department.name; // 已选的单个部门名称

							}
							var selectedUserList = res.result.userList; // 已选的成员列表

							for(var i = 0; i < selectedUserList.length; i++) {
								var user = selectedUserList[i];
								var userId = user.id; // 已选的单个成员ID

								initiator.push(userId)
								var userName = user.name; // 已选的单个成员名称

								var userAvatar = user.avatar; // 已选的单个成员头像

							}
							var html = "已选择" + selectedUserList.length + "人";
							$("#count1").html(html)
						}
					});
				})
				$("#peo2").click(function() {
					participant = []
					wx.invoke("selectEnterpriseContact", {
						"fromDepartmentId": 0, // 必填，-1表示打开的通讯录从自己所在部门开始展示, 0表示从最上层开始

						"mode": "multi", // 必填，选择模式，single表示单选，multi表示多选

						"type": ["user"], // 必填，选择限制类型，指定department、user中的一个或者多个

						//					"selectedDepartmentIds": ["2", "3"], // 非必填，已选部门ID列表。用于多次选人时可重入

						//					"selectedUserIds": ["lisi", "lisi2"] // 非必填，已选用户ID列表。用于多次选人时可重入

					}, function(res) {
						if(res.err_msg == "selectEnterpriseContact:ok") {
							if(typeof res.result == 'string') {
								res.result = JSON.parse(res.result) //由于目前各个终端尚未完全兼容，需要开发者额外判断result类型以保证在各个终端的兼容性

							}
							var selectedDepartmentList = res.result.departmentList; // 已选的部门列表

							for(var i = 0; i < selectedDepartmentList.length; i++) {
								var department = selectedDepartmentList[i];
								var departmentId = department.id; // 已选的单个部门ID

								var departemntName = department.name; // 已选的单个部门名称

							}
							var selectedUserList = res.result.userList; // 已选的成员列表

							for(var i = 0; i < selectedUserList.length; i++) {
								var user = selectedUserList[i];
								var userId = user.id; // 已选的单个成员ID

								participant.push(userId)
								var userName = user.name; // 已选的单个成员名称

								var userAvatar = user.avatar; // 已选的单个成员头像

							}
							var html = "已选择" + selectedUserList.length + "人";
							$("#count2").html(html)
						}
					});
				})
				// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。

			});
			$("#submit").click(function() {
				var topic = $("#title").val();
				var room = $("#room").html();
				var starttime = $("begintime").val();
				var finishtime = $("endtime").val();
				console.log(finishtime)
				var zcr = zcr;
				var ydr = initiator.toString();
				var chr = participant.toString();
				var prechr = $("#total").val();
				var bz = $("#other").val();
				var device = "";
				$("submit", {
					topic: topic,
					room: room,
					starttime: starttime,
					finishtime: finishtime,
					zcr: zcr,
					ydr: ydr,
					chr: chr,
					prechr: prechr,
					bz: bz,
					device: decive
				}, function(data) {
					if(data.res == "true") {
						alert("预订成功")
					} else {
						alert("预订失败")
					}
				})
			})
		</script>

	</body>

</html>